import React, { startTransition, useState, useEffect } from 'react'
import { useLocation, useNavigate } from 'react-router-dom'
import { NavBar } from 'antd-mobile';
import "../css/myorder.css"
import Order from './order'

export default function MyOrder() {
  const navigate = useNavigate()
  const location = useLocation()

  const [state, setState] = useState('')

  const back = () => {
    startTransition(() => {
      navigate('/bttm/my')
    })
  }

  useEffect(() => {
    setState(location.state.state)
  }, [])
  return (
    <div className='cxb_myorder'>
      <div className='cxb_myorder_navbar'>
        <NavBar onBack={back}>我的订单</NavBar>
        <div className='cxb_myorder_navbar_state'>
          <span onClick={() => setState('全部')} className={`cxb_myorder_status_ls ${state === '全部' ? 'status_default' : ''}`}>全部</span>
          <span onClick={() => setState('待付款')} className={`cxb_myorder_status_ls ${state === '待付款' ? 'status_default' : ''}`}>待付款</span>
          <span onClick={() => setState('待发货')} className={`cxb_myorder_status_ls ${state === '待发货' ? 'status_default' : ''}`}>待发货</span>
          <span onClick={() => setState('待收货')} className={`cxb_myorder_status_ls ${state === '待收货' ? 'status_default' : ''}`}>待收货</span>
          <span onClick={() => setState('待评价')} className={`cxb_myorder_status_ls ${state === '待评价' ? 'status_default' : ''}`}>待评价</span>
        </div>
      </div>
      <Order status={state} />
    </div>
  )
}
